<template>
<div class="wrap">
<xcl-header :show="loading.show" :call-back="()=>{}" :page-title="pageTitle"></xcl-header>
<xcl-footer :show="loading.show" :show-txt="loading.showTxt"></xcl-footer>

<div class="content">
	<div class="list-block" style="margin:0">
    <div v-if="topics.length === 0 && loading.show === false">
      <div class="no-data">暂无收藏</div>
      <div class="row" >
      <div class="col-33">&nbsp; </div>
      <a v-link="{path:'/Products'}" class="button col-33" style="margin-top:1rem;">发现最新产品</a></div>
    </div>
		<ul v-else>
			<li v-for="i in topics" transition="fade">
				<div class="row" style="padding:0.5rem;border-bottom:1px solid #ccc">
					<div class="col-85">
						<div class="row">
							<div class="col-60" v-link="{name:'ProductDetail',params:{SId:i.sid}}">{{i.n}}</div>
							<div class="col-40" style="text-align:right;color:red">{{i.it1 | formatPercent}}</div>
						</div>
						<div class="row" style="font-size:0.7rem;color:#666">
							<div class="col-60">{{i.tn}}</div>
							<div class="col-40" style="text-align: right;">{{i.n1 | formatNumber 4}}</div>
						</div>
					</div>
					<div class="col-15" style="font-size:1.5rem;text-align:center;color:red;" @click="cancleMyFavorite($index,i.pid)">
						<span class="icon icon-icstar2 icon-size"></span>
					</div>
				</div>				
			</li>
		</ul>
	</div>
</div>

  <xcl-loading :show="loading.show"></xcl-loading>
  <xcl-alert :show="alertCom.show" :show-content="alertCom.content" :confirm-fn="alertCom.confirmFn"  :cancle-fn="alertCom.cancleFn" :alert-title="alertCom.title" transition="fade"></xcl-alert>
  </div>
</template>
<script>
  import xclHeader from '../components/header.vue'
  import xclFooter from '../components/footer.vue'
  import xclLoading from '../components/loading.vue'
  import xclAlert from '../components/xclAlert.vue'
  import MyFollowProxy from '../proxy/my_follow_proxy';
  let MyFollow = new MyFollowProxy();
  export default {
        data (){
            return {
                scroll:true,
                pageTitle:'收藏',
                topics:[],
                searchKey:{
                    page:1,
                    limit:10,
                    tab:'all',
                    mdrender:true
                },
                loading:{
                    show:false
                },
                alertCom:{
                    show:false,
                    content:'您确定要取消关注吗？',
                    title:'取消关注',
                    confirmFn:()=>{},
                    cancleFn:()=>{}
                }
            }
        },
        methods:{
          getMyFavorite(){
              let _this = this;
              _this.loading.show = true ;
              MyFollow.queryMyFollows(localStorage.token,2,2,1,20,function(dd){
                  if(dd.code == 200 && dd.results && dd.results.length){
                      _this.topics = _this.topics.concat(dd.results);
                      _this.loading.show = false;
                  }else if(dd.code == 4090){
                      localStorage.removeItem('token');
                      _this.$router.go('/Login'); 
                  }else{
                    _this.loading.show = false;
                  }
              });
          },
          cancleMyFavorite(index,fid){
            let _this = this;
            this.alertCom.show = true;
            this.alertCom.cancleFn = function(){
                _this.alertCom.show = false;
            },
            this.alertCom.confirmFn = function(){
                _this.loading.show = true ;
                MyFollow.cancelMyFollow(localStorage.token,fid,2,'remark',function(d){
                      if(d.code == 200){
                          _this.topics.splice(index,1);
                          _this.loading.show = false;
                          _this.alertCom.show = false;
                          _this.alertCom.confirmFn = null;
                      }else if(d.code == 4090){
                          localStorage.removeItem('token');
                          _this.$route.go('/Login'); 
                      }else{
                          _this.loading.show = false;
                      }
                });
            }  
          }
        },
        ready(){
         
        },
        route:{
           data(){
              this.loading.show = this.$loadingRouteData;
              this.getMyFavorite();
            }
        },
        components:{
           "xclHeader":xclHeader,
           "xclFooter":xclFooter,
           "xclLoading":xclLoading,
           "xclAlert":xclAlert
        }
    }
</script>

